<template>
    <div class="shangpin">
        <h1>商品管理</h1>

        <div class="input">
            <span style="margin: auto 0;font-size: 16px">状态：</span>
            <div>
                <el-radio-group v-model="radio1" style="margin-right: 20px;" @change="goods">
                    <el-radio-button label="全部商品"></el-radio-button>
                    <el-radio-button label="上架中"></el-radio-button>
                    <el-radio-button label="已下架"></el-radio-button>
                </el-radio-group>
            </div>
            <div>
                <span>商品名称：</span>
                <el-input class="shuru" v-model="inputmendain" placeholder="请输入驿站名称">{{inputmendain}}</el-input>
            </div>
            <div>
                <span>所属门店：</span>
                <el-input class="shuru" v-model="mendainphone" placeholder="请输入小区名称">{{mendainphone}}</el-input>
            </div>

            <div class="block">
                <span class="demonstration">发布日期：</span>
                <el-date-picker
                        v-model="value1"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">

                </el-date-picker>
                <el-button style="margin-left: 10px" @click="search" type="primary">搜索</el-button>
            </div>
        </div>


        <template>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%"
                    :header-cell-style="{'background-color':'rgb(24, 144, 255)','color':'white','text-align':' center'}"
                    :cell-style="{'text-align':'center'}"
            >
                <el-table-column
                        fixed
                        prop="goodsId"
                        label="商品ID"
                >
                </el-table-column>
                <el-table-column
                        fixed
                        prop="goodsName"
                        label="商品"
                >
                </el-table-column>
                <el-table-column
                        prop="goodsShopName"
                        label="所属门店"
                >
                </el-table-column>
                <el-table-column
                        prop="goodsSalesVolume"
                        label="销量"
                >
                </el-table-column>

                <el-table-column
                        prop="goodsPresentPrice"
                        label="预估价"
                >

                </el-table-column>
                <el-table-column
                        prop="addTime"
                        label="发布时间"
                >
                </el-table-column>

                <el-table-column
                        fixed="right"
                        label="状态"
                        prop="goodsStatus"
                >
                    <template slot-scope="scope1">

                        <el-button type="text" size="small" v-if="scope1.row.goodsStatus==1">
                            上架中
                        </el-button>
                        <el-button type="text" size="small" v-else>
                            已下架
                        </el-button>


                    </template>
                </el-table-column>


                <el-table-column
                        fixed="right"
                        label="操作"
                        prop="goodsStatus"
                >
                    <template slot-scope="scope2">
                        <el-button type="text" size="small" @click="upDown(scope2.row)"
                                   v-if="scope2.row.goodsStatus==1">
                            下架
                        </el-button>
                        <el-button type="text" size="small" @click="upDown(scope2.row)"
                                   v-else>
                            上架
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>


        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "yizhanComponent",
        data() {
            return {
                radio1: '全部商品',


                inputmendain: "",
                mendainphone: '',
                mendainStationStatus: '',
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }],
                },
                value1: '',
                value2: '',


                imageUrl: '',
                dialogFormVisible: false,
                bianjixiaoqu: false,


                formLabelWidth: '120px',

                addressAll: [],   //省市区
                address: [], //你选择的地址

                upDownArr: ["全部门店", "上架中", "已下架"],
                index: 0,
                weizhi1: "",
                weizhi2: "",
                weizhi3: "",
                weizhi4: "",
                id: "",
                CommunityId: "",
                Sort: 1,
                Status: 1,
                upDownStatus: "立即上架",

                myGoodsStatus: "",


                tableData: [], // 表格数据
                currentPage: 1, // 当前页数
                pageSize: 10, // 每页条数
                total: 100 // 数据总数
            }
        },

        methods: {
            goods(a) {
                if (a == "全部商品") {
                    this.shujuAll()
                } else if (a == "上架中") {
                    this.upGoods()
                } else {
                    this.downGoods()
                }
                console.log(a)
            },

            search() {
                if (!this.value1) {
                    this.value1 = "";
                }
                this.axios.get("/goods/querySearchShopGoodsList?", {
                    params: {
                        pageNum: 1,
                        pageSize: 10,
                        goodsName: this.inputmendain,
                        goodsStatus: "",
                        shopName: this.mendainphone,
                        startTime: this.getDateString(this.value1[0]),
                        endTime: this.getDateString(this.value1[1]),
                    }
                }).then(res => {
                    this.myGoodsStatus = '';
                    this.tableData = res.data.data.list;
                    this.total = res.data.data.total;
                }).catch(err => {
                    "错误"
                })
            },

            upGoods() {
                this.axios.get("/goods/querySearchShopGoodsList?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize + "&goodsName=&goodsStatus=1&shopName=&startTime=&endTime="
                ).then(res => {
                    this.myGoodsStatus = 1;
                    this.tableData = res.data.data.list;
                    this.total = res.data.data.total;
                }).catch(err => {
                    "错误"
                })
            },

            downGoods() {
                this.axios.get("/goods/querySearchShopGoodsList?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize + "&goodsName=&goodsStatus=0&shopName=&startTime=&endTime="
                ).then(res => {
                    this.myGoodsStatus = 0;
                    this.tableData = res.data.data.list;
                    this.total = res.data.data.total;
                }).catch(err => {
                    "错误"
                })
            },


            getDateString(date) {
                // let str = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " 00:00:00";
                // return str;
                if (!date) {
                    return ""
                }
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                const hours = String(date.getHours()).padStart(2, '0');
                const minutes = String(date.getMinutes()).padStart(2, '0');
                const seconds = String(date.getSeconds()).padStart(2, '0');
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            },


            
            shujuAll() {
                this.axios.get("/goods/querySearchShopGoodsList?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize + "&goodsName=&goodsStatus=&shopName=&startTime=&endTime=").then(res => {
                    this.tableData = res.data.data.list;
                    this.total = res.data.data.total;

                    // console.log(this.tableData)
                    // console.log(res.data);
                }).catch(err => {
                });
            },

            //点击切换上下架
            upDown(row) { 
                let sta = "";
                if (row.goodsStatus === 1) {
                    sta = 0;
                } else {
                    sta = 1;
                }
                this.axios.post("/goods/modifyShopGoods", {
                    goodsId: row.goodsId,
                    goodsStatus: sta
                }).then(res => {
                    this.shujuAll()
                }).catch(e => {
                })
            },


            handleUploadSuccess(response, file) {
                // 处理上传成功后的响应，这里假设上传成功后返回图片的URL或者路径
                this.imageUrl = response.imageUrl; // 假设服务器返回的数据中包含 imageUrl 字段
            },
            beforeUpload(file) {
                // 可以在这里对文件进行大小、类型等验证
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                if (!isJPG) {
                    this.$message.error('上传图片只能是 JPG 格式!');
                    return false;
                }
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!');
                    return false;
                }
                return true; // 返回 true 允许上传，返回 false 则取消上传
            },
            // 切换每页条数
            handleSizeChange(size) {
                this.pageSize = size;
                // 可以在这里重新获取数据
                this.shujuAll();
            },
            // 切换当前页
            handleCurrentChange(page) {
                // this.currentPage = page;
                // 可以在这里重新获取数据

                this.axios.get("/goods/querySearchShopGoodsList?", {
                    params: {
                        pageNum: page,
                        pageSize: this.pageSize,
                        communityName: this.mendainphone,
                        goodsStatus: this.myGoodsStatus,
                        startTime: this.getDateString(this.value1[0]),
                        endTime: this.getDateString(this.value1[1]),
                        courierStationName: this.inputmendain,
                    }
                }).then(res => {
                    this.tableData = res.data.data.list;
                    this.total = res.data.data.total;

                }).catch(err => {
                    "错误"
                })
            },
        },

        computed: {},


        created() {
            this.shujuAll();

        }
    }
</script>

<style scoped>
    .shangpin {
        /*height: 800px;*/
        /*background-color: greenyellow;*/
        padding: 20px;
    }

    .mendian {
        /*height: 100%;*/
        /*height: 800px;*/
        /*background-color: greenyellow;*/

    }

    .input {
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
    }

    .input > div {
        margin: 20px 0;
    }

    span {
        font-size: 16px;
    }

    .shuru {
        width: 200px;
        height: 36px;
        padding: 0 15px;

    }
</style>